<script setup lang="ts">
import myCaptcha from "@/composables/myCaptcha.ts";
const props = defineProps<{
  captcha_code:string
}>()
const {captcha,showCaptcha} = myCaptcha();
showCaptcha();
const emit = defineEmits(['update:captcha_code','update:captcha_key'])
watch(captcha,()=>{
  emit('update:captcha_key',captcha.value?.key);
},{
  immediate:true
})
</script>

<template>
  <main class="captcha">
    <form-input
        :value="props.captcha_code"
        placeholder="请输入验证码"
        @input="emit('update:captcha_code',($event.target as HTMLInputElement).value)"
        v-clearError="'captcha_code'"
    />
    <img :src="captcha?.img" alt="验证码" @click="showCaptcha()"/>
  </main>
</template>

<style lang="scss" scoped>
main.captcha {
  @apply flex items-center gap-2 w-full;
  img{
    @apply cursor-pointer rounded border border-slate-400;
  }
}
</style>